<template>
	<view class="sales">
		<view class="sales-nav">
			<custom-search-nav
				:storeName="storeName" 
				:storeList="storeAllList" 
				:mainStore="userInfo.storeType == StoreType.main" 
				@search="handleSearch" 
				@storechange="handleStoreChange"
			></custom-search-nav>
		</view>
		<view class="sticky-top sales-menu">
			<dropdown-menu 
				:showFileds="['date', 'sales', 'channel']" 
				@orderbychange="handleOrderByChange" 
				@channelchange="handleChannelChange" 
			></dropdown-menu>
		</view>
		
		<process-frame
			:loading="loading" 
			:error="error" 
			:errorMsg="errorMsg" 
			:empty="empty" 
			emptyText="暂无销售商品" 
			:errorBtn="errorBtn" 
			@errorclick="handleFilter"
		>
			<u-alert 
				type="success" 
				center 
				fontSize="26" 
				:description="statText" 
			></u-alert>
			
			<view class="p-20">
				<view class="m-b-20" v-for="item in productList" :key="item.id">
					<view class="product-item" @click="toSalesDetailPage(item.id)">
						<custom-image
							:src="item.picUrl"
							width="160rpx" 
							height="160rpx" 
							radius="12rpx" 
							mode="aspectFill" 
						></custom-image>
						<view class="product-content">
							<view class="product-title u-line-2">{{ item.name }}</view>
							<view class="product-label">货号：{{ item.goodsSn }}</view>
							<view class="product-label">销售：{{ item.saleNum }}件</view>
						</view>
					</view>
				</view>
			</view>
		</process-frame>
	</view>
</template>

<script>
	import processFrame from '@/mixins/process-frame.js'
	import userMixins from '@/mixins/user.js'
	import { saleList } from '@/api/sales.js'
	import { storeAllList } from '@/api/store.js'
	import { StoreType } from '@/utils/enum.js'
	
	const queryParams = {
		pageNum: 1,
		pageSize: 10,
	}
	
	export default {
		mixins: [processFrame, userMixins],
		data() {
			return {
				productList: [],
				storeAllList: [],
				storeName: '',
				StoreType,
				statText: ''
			}
		},
		computed: {
			empty() {
				return !this.productList || this.productList.length == 0
			}
		},
		watch: {
			userInfo(info) {
				this.initDefaultStore(info)
			}
		},
		// 下拉刷新
		async onPullDownRefresh() {
			try {
				queryParams.pageNum = 1
				await this.getList()
			} finally {
				uni.stopPullDownRefresh()
			}
		},
		// 上拉加载触发
		onReachBottom() {
			this.hasMore && this.getList(false)
		},
		onLoad(options) {
			this.handleFilter()
			this.$wxSdkUtil.init(null, { hideShare: true })
			
			if (this.token && this.userInfo && JSON.stringify(this.userInfo) !== '{}') {
				this.initDefaultStore(this.userInfo)
			}
		},
		methods: {
			// 重新获取数据
			async handleFilter() {
				try {
					this.loading = true
					this.error = false
					queryParams.pageNum = 1
					await this.getList()
				} catch (error) {
					this.error = true
					this.errorMsg = error.message
				} finally {
					this.loading = false
				}
			},
			// 列表
			async getList(replace = true) {
				const { rows, total, totalSalePrice, totalSaleNum } = await saleList(queryParams)
				if (replace) {
					this.productList = rows
				} else {
					this.productList.push(...rows)
				}
				this.statText = `全部商品：${total}个 | 总销量：${totalSaleNum}件 | 总价值：${totalSalePrice}元`
				this.hasMore = queryParams.pageNum * queryParams.pageSize < total
				queryParams.pageNum++
			},
			// 基于用户信息初始化门店信息
			initDefaultStore(userInfo) {
				// 总店用户获取分店列表 并将自己门店添加到列表中
				if (userInfo.storeType == StoreType.main) {
					this.getStoreAllList(userInfo.storeName)
				}
				// 当前用户的门店作为默认筛选门店
				if (!this.storeName) {
					this.storeName = userInfo.storeName
				}
			},
			// 获取所有分店列表
			async getStoreAllList(storeName) {
				const { data } = await storeAllList()
				data.unshift({ id: '', storeName })
				this.storeAllList = data
			},
			// 搜索
			handleSearch(value) {
				queryParams.searchValue = value
				this.handleFilter()
			},
			// 门店切换
			handleStoreChange(storeInfo) {
				this.storeName = storeInfo.storeName
				queryParams.storeId = storeInfo.id
				this.handleFilter()
			},
			// 排序切换
			handleOrderByChange(info) {
				queryParams.orderBy = info.dictValue
				this.handleFilter()
			},
			// 渠道切换
			handleChannelChange(info) {
				queryParams.saleStatus = info.dictValue
				this.handleFilter()
			},
			// 去售卖详情
			toSalesDetailPage(id) {
				uni.navigateTo({
					url: '/pages/sales/detail?goodsId=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sales {
		&-nav {
			background-color: $u-nav-color;
			padding: 10rpx 30rpx 0;
		}
		&-menu {
			background-color: $u-nav-color;
		}
		.product-item {
			display: flex;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			.product-content {
				flex: 1;
				margin-left: 20rpx;
				.product-title {
					font-size: 28rpx;
					font-weight: 500;
					color: $u-main-color;
				}
				.product-label {
					margin-top: 6rpx;
					font-size: 24rpx;
					font-weight: normal;
					color: $u-content-color;
				}
			}
		}
	}
</style>